import React, { memo, useEffect, useState } from "react";
import { useSelector, shallowEqual, useDispatch, } from "react-redux";
import './css.scss'
import { getDetailsAction, getReport, getLook } from "./store/actionCreators";
import RechTitle from '../../components/RechTitle'
import TitleMore from '../../components/TitleMore'
import LookList from '../../components/LookList'
import ReportList from '../../components/ReportList'
import Search from './components/Certificate'
import ContactUs from './components/ContactUs'
import ExplainForm from './components/ExplainForm'
import { searchAdvertising } from '../../services/home'
import { IMGURL } from '../../services/config'
export default memo(function App() {
    const [advertisingImg, setAdvertisingImg] = useState('')
    const { details, reportList, lookLists } = useSelector(
        (state) => ({
            details: state.getIn(["home", "details"]),
            reportList: state.getIn(["home", "reportList"]),
            lookLists: state.getIn(["home", "lookList"]),
        }),
        shallowEqual
    );

    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getDetailsAction());
        dispatch(getReport({
            category: 12,
            page: 1,
            pageSize: 12,
        }));
        dispatch(getLook({
            category: 13,
            page: 1,
            pageSize: 12,
        }));
        searchAdvertising({ category: 12 }).then(res => {
            if (res.data.length !== 0) {
                setAdvertisingImg(res.data[0].imgUrl)
            }
        })
    }, [dispatch]);
    return (
        <div className='w home_box'>
            <div style={{ marginBottom: "60px" }}>
                <RechTitle title='奖项介绍' isImgOrVideo={details.contestFileId} content={details.contestText} videoUrl={details.contestVideoUrl ? details.contestVideoUrl : ''}></RechTitle>
            </div>
            <div className='contrent_box w'>
                <div className='left'>
                    <ExplainForm details={details} />
                    <div style={{ marginBottom: "60px" }}>
                        <TitleMore isMore={true} moreUrl='/reportList' title='获奖公示'></TitleMore>
                        <ReportList list={reportList.list}></ReportList>
                    </div>
                    <div style={{ marginBottom: "60px" }}>
                        <TitleMore isMore={true} moreUrl='/lookList' title='相关资讯'></TitleMore>
                        <div>
                            <LookList list={lookLists.list ? lookLists.list : []}></LookList>
                        </div>
                    </div>
                    {/* 广告 */}
                    <img style={{ width: '100%', height: '250px' }} src={IMGURL + advertisingImg} alt="" />
                </div>
                <div className='right'>
                    <div style={{ marginBottom: '60px' }}>
                        <Search></Search>
                    </div>
                    <ContactUs list={details.rightContent}></ContactUs>
                </div>

            </div>
        </div>
    );
});
